<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>遮挡解决穿透</title>
     <style>
        div { display: block; border: 1px solid black;  margin: 10px; padding: 10px; }
    </style>
    
</head>
<body>

   <script src="js/zepto.min.js"></script>
    <div id="p1">
        p1
        <div id="p1-1">
            p1-1
            <div id="p1-1-1">
                p1-1-1
            </div>
             <div id="p1-1-2">
                p1-1-2
            </div>
        </div>
    </div>

     <div id="p2">
        p2
        <div id="p2-1"  style="pointer-events: none;">
            2-1
            <div id="p2-1-1">
                p2-1-1
            </div>
             <div id="p2-1-2">
                p2-1-2
            </div>
            <input type="text" id="input" />
        </div>
    </div>

</body>
<script type="text/javascript">
    $('div').click(function () {
        alert($(this).attr('id'))
    })

    $('#input').click(function () {
        alert('文本框')
    });
</script>